<template>
  <div class="hello">
    <div class="home">
      <div class="main">
        <div style="border: 1px solid #DCDFE6;width: 100% ; ">
          <div class="tablehead">
            <div style="display: flex; line-height: 30px;margin-top: 5px;">
              <div style="height: 20px;width: 5px;background-color: #47ACF4;margin-right: 10px;margin-top: 5px;"></div>
              <span>生产计划子项表</span>
            </div>
            <div style="margin-left: 36px; line-height: 30px;margin-top: 5px;">
              <span style="color: red;">{{ tips }}</span>
            </div>
            <div style="margin-left: auto;">
              <div style="height: 40px;margin-top: 5px; display: flex;" v-if="(createFlag && roleKey) || adminFlag">
                <el-button type="primary" style="height: 30px;line-height: 12px;" @click="dialogEditPlan = true"
                  :disabled="true">添加新生产计划子项</el-button>
                <el-button type="primary"
                  style="height: 30px;background: transparent; color: #47ACF4; margin-right: 12px;line-height: 12px;"
                  @click="beginProductionPlan" :disabled="afterSubmit">提交计划审批申请</el-button>
                <!-- <el-button type="primary" style="height: 30px;" @click="dialogTableVisible = true">上传生产计划表</el-button> -->
                <!-- <el-button style="margin-right: 20px;height: 30px;">刷新</el-button> -->
              </div>
            </div>
          </div>
          <div style="">
            <el-table :data="tableData" :cell-style="tableStyle" :header-cell-style="headerCellStyle"
              style="width: 100%">
              <el-table-column v-for="( column, index ) of  columns " :key="index" :prop="column.prop"
                :label="column.label" :fixed="column.fixed" :width="column.width">
                <template slot-scope="scope">
                  <span v-if="scope.row.isSet && column.label == '计划负责部门'">
                    <!-- <el-cascader :options="deptOptions" ref="OptionRefDept" :show-all-levels="false" @change="getUser"
                      placeholder="请选择计划负责部门" v-model="scope.row[column.prop]" :props="{ checkStrictly: true }"
                      style="width: 100%;" clearable></el-cascader> -->
                    <el-select v-model="scope.row[column.prop]" placeholder="请选择计划负责部门" style="width: 100%; ">
                      <el-option v-for="item in deptOptions" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </span>
                  <span v-else-if="scope.row.isSet && column.label == '计划类型'">
                    <el-select ref="OptionRefPlanType" v-model="scope.row[column.prop]" placeholder="请选择计划类型"
                      style="width: 100%;">
                      <el-option v-for=" item in PlanTypeOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </span>
                  <span v-else-if="scope.row.isSet && column.label == '主要作业人员'">
                    <el-input v-model="scope.row[column.prop]" placeholder="请输入主要作业人员"></el-input>
                    <!-- <el-select v-model="scope.row[column.prop]" multiple filterable placeholder="请选择主要作业人员"
                      style="width: 100%;" @change="changeData">
                      <el-option v-for=" item in userListOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select> -->
                  </span>
                  <span v-else-if="scope.row.isSet && column.label == '计划负责人'">
                    <el-select v-model="scope.row[column.prop]" ref="OptionRefOne" placeholder="请选择计划负责人"
                      style="width: 100%;">
                      <el-option v-for=" item in userListOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </span>
                  <span v-else-if="scope.row.isSet && column.label == '计划开始时间'">
                    <el-date-picker v-model="scope.row[column.prop]" type="date" placeholder="选择日期" style="width: 100%;"
                      format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                  </span>
                  <span v-else-if="scope.row.isSet && column.label == '计划结束时间'">
                    <el-date-picker v-model="scope.row[column.prop]" type="date" placeholder="选择日期" style="width: 100%;"
                      format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                  </span>
                  <span v-else-if="scope.row.isSet && column.label == '计划内容'">
                    <el-input type="textarea" placeholder="请输入计划内容" v-model="scope.row[column.prop]"></el-input>
                  </span>
                  <span v-else>{{ scope.row[column.prop] }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column v-for="(column, index) of columns" :key="index" :prop="column.prop" :label="column.label"
                :fixed="column.fixed" :width="column.width">
              </el-table-column> -->
              <el-table-column fixed="right" label="操作" width="120">

                <template slot-scope="scope">
                  <el-button :disabled="afterSubmit" v-if="(createFlag && roleKey) || adminFlag"
                    @click="editRow(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
                  <el-button :disabled="afterSubmit" v-if="(createFlag && roleKey) || adminFlag"
                    @click="newPlan(scope.row)" type="text" size="small">保存</el-button>
                  <!-- <el-button @click="viewRow(scope.row)" type="text" size="small">查看</el-button> -->
                  <el-button :disabled="afterSubmit" v-if="((createFlag && roleKey) || adminFlag) && scope.row.isDelete"
                    @click="deleteRow(scope.row, scope.$index)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button type="" style="width: 100%;height: 50px;background: transparent; color: #47ACF4;"
              @click="addPlanTable" :disabled="afterSubmit">+添加自定义</el-button>
          </div>
        </div>
        <!-- 审批 -->

        <template>
          <div style="margin-top: 50px; width: 97%;">
            <el-form ref="form" :model="opinionform" label-width="100px" v-if="!canEditOpinions">
              <el-row style="margin-top: 30px;">
                <el-col :span="24">
                  <el-form-item label="审批意见：" prop="opinions">
                    <el-input :disabled="canEditOpinions" type="textarea" v-model="opinionform.opinions"
                      placeholder="请输入" :rows="4"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="" prop="status">
                    <el-radio-group :disabled="canEditOpinions" v-model="opinionform.status">
                      <el-radio :label="'1'">同意</el-radio>
                      <el-radio :label="'2'">不同意</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="审批人：" prop="userId">
                    <el-select ref="userId" :disabled="true" filterable v-model="opinionform.userId" placeholder="请选择"
                      style="width: 100%;">
                      <el-option v-for="  item   in  userList  " :key="item.value" :label="item.name"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="审批时间" prop="time">
                    <el-date-picker :disabled="true" value-format="yyyy-MM-dd HH:mm:ss" v-model="opinionform.time"
                      type="date" style="width: 100%;" placeholder="选择日期时间"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="">
                <el-button type="primary" @click="doApproveProductionPlan" :disabled="canEditOpinions">提交</el-button>
              </el-form-item>
            </el-form>
          </div>

        </template>
        <!-- 审批日志 -->
        <LogsBox :logsData="flowList"></LogsBox>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogEditPlan" @closed="closed">
      <el-form ref="form" :model="form" label-width="110px" :disabled="editFlag" :rules="rules">
        <el-form-item label="计划类型" prop="type">
          <el-select ref="OptionRefPlanType" v-model="form.type" placeholder="请选择计划类型" style="width: 100%;">
            <el-option v-for=" item in PlanTypeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划开始时间" prop="startTime">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.startTime" style="width: 100%;"
            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="计划结束时间" prop="endTime">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.endTime" style="width: 100%;"
            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="计划负责部门" prop="responsibleDeptId">
          <el-cascader :options="deptOptions" ref="OptionRefDept" :show-all-levels="false"
            v-model="form.responsibleDeptId" @change="getUser" placeholder="请选择计划负责部门" :props="{ checkStrictly: true }"
            style="width: 100%;" clearable></el-cascader>
        </el-form-item> -->
        <!-- <el-form-item label="计划负责人" prop="responsiblePersonId">
          <el-select ref="OptionRefOne" v-model="form.responsiblePersonId" placeholder="请选择计划负责人" style="width: 100%;">
            <el-option v-for=" item in userListOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="主要作业人员" prop="players">
          <!-- <el-select v-model="form.players" multiple placeholder="请选择主要作业人员" style="width: 100%;">
            <el-option v-for=" item in userListOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select> -->
          <el-input v-model="form.players" placeholder="请输入主要作业人员"></el-input>
        </el-form-item>
        <el-form-item label="总体计划安排描述" prop="content">
          <el-input type="textarea" placeholder="请输入总体计划安排描述" v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center;">
        <el-button :disabled="editFlag" type="primary" style="height: 30px;" @click="newPlan()">确定</el-button>
        <el-button style="height: 30px;" @click="dialogEditPlan = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/NormalTable'
import { getPlanList, addPlan, getAllUser, deletePlan, editPlan, startProductionPlan, approveProductionPlan, productionPlanProcessList } from '@/api/project/task'
import { getDeptList } from "@/api/project/project";
import LogsBox from "@/components/LogsBox";
export default {
  components: {
    Table,
    LogsBox
  },
  props: {
    taskTypeName: {
      type: String,
      required: false,
    }
  },
  dicts: ['xmgl_process_status'],
  data() {
    return {
      tips: '',
      canSubmit: true,
      adminFlag: false,
      createFlag: false,
      editFlag: false,
      afterSubmit: false,
      roleKey: false,
      dialogEditPlan: false,
      dialogTableVisible: false,
      headerCellStyle: {
        "background-color": '#F5F7FA',
        'text-align': 'center',
        'font-family': 'PingFangSC-Medium',
        'font-weight': 500,
        'font-size': '14px',
        'color': '#606266',
        'line-height': '22px'
      },
      tableStyle: {
        "text-align": 'center',
      },
      userList: [],
      deptOptions: [],
      userListOptions: [],
      title: '添加新生产计划子项',
      formInline: {
        user: '',
        region: '',
        players: '',
      },
      flowList: [],
      opinionform: {},
      form: {
        responsibleDept: ''
      },
      columns: [
        { prop: 'index', label: '序号', width: '100', fixed: false },
        { prop: 'planType', label: '计划类型', width: '', fixed: false },
        // { prop: 'responsibleDept', label: '计划负责部门', width: '', fixed: false },
        // { prop: 'responsiblePerson', label: '计划负责人', width: '', fixed: false },
        { prop: 'startTime', label: '计划开始时间', width: '', fixed: false },
        { prop: 'endTime', label: '计划结束时间', width: '', fixed: false },
        { prop: 'players', label: '主要作业人员', width: '', fixed: false },
        { prop: 'content', label: '计划内容', width: '', fixed: false },
      ],
      tableData: [],
      regularTableData: [],
      isEdit: false,
      processStatusOption: [],
      PlanTypeOptions: [],
      userRole: null,
      canEditOpinions: true,
      tempTypeName: '',
      rules: {
        type: [
          { required: true, message: '请选择计划类型', trigger: 'blur' },
        ],
        startTime: [
          { required: true, message: '请输入计划开始时间', trigger: 'blur' },
        ],
        endTime: [
          { required: true, message: '请输入计划结束时间', trigger: 'blur' },
        ],
        // responsibleDept: [
        //   { required: true, message: '请输入计划负责部门', trigger: 'blur' },
        // ],
        // responsiblePersonId: [
        //   { required: true, message: '请输入计划负责人', trigger: 'blur' },
        // ],
        players: [
          { required: true, message: '请输入主要作业人员', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入总体计划安排描述', trigger: 'blur' },
        ]
      }
    }
  },
  mounted() {
    console.log(this.productionPlanType)
    this.processStatusOption = this.getDict('xmgl_process_status')
    this.PlanTypeOptions = this.getDict('xmgl_task_plantype')
    console.log('PlanTypeOptions', this.PlanTypeOptions)
    this.userRole = this.$store.state.userInfo.userRoleKeyList
    this.getProductionPlanProcessList()
    this.userRole.forEach(item => {
      if (item == 'scbm_rwfzr') {
        this.createFlag = true
        this.roleKey = true
      }
      if (item == 'admin') {
        this.adminFlag = true;
      }
    });
    this.loadTable()
    getDeptList().then(res => {
      this.deptOptions = res.data[0].children
    });
    this.setDefault();
  },
  methods: {
    getflowList() {
      productionPlanProcessList(this.$route.query.taskId, 'production_plan').then(res => {
        res.data.sort(function (a, b) {
          // 将时间字符串转换为日期对象，以便进行比较
          var dateA = new Date(a.startTime);
          var dateB = new Date(b.startTime);
          return dateA - dateB;
        });
        console.log('getflowList', res.data)
      })
    },
    //初始化table
    loadTable() {
      this.regularTableData = this.productionPlanType[this.taskTypeName]

      getPlanList(this.$route.query.taskId).then(res => {
        this.tableData = res.rows
        this.tableData.forEach((row, index) => {
          row.isSet = false
          if (row.status == '0') {
            this.afterSubmit = false
            this.createFlag = true
          } else {
            this.afterSubmit = true
            this.createFlag = false
          }
          row.planType = this.convertDictValueToLabel(row.type, 'xmgl_task_plantype');
          row.isDelete = true
          this.regularTableData.forEach((element, index) => {
            // this.regularTableData[index].status = false
            if (element.name == row.planType) {
              this.regularTableData[index].status = true
            }
            // } else {
            //   this.regularTableData[index].status = false
            // }
          });
          row.personOriginal = row.players
          row.index = index + 1
        });
        this.regularTableData.forEach(element => {
          if (!element.status) {
            let tempList = {
              planType: element.name,
              type: element.type,
              index: this.tableData.length + 1,
              isSet: true,
              isDelete: false,
              players: '',
              startTime: "",
              endTime: "",
              responsibleDept: '',
              responsibleDeptId: "",
              responsiblePersonId: "",
              content: "",
              taskId: "",
              responsiblePerson: ""
            }
            tempList = JSON.parse(JSON.stringify(tempList))
            this.tableData.push(tempList)
          }
        });
        console.log('this.tableData', this.tableData)
      })
    },
    addPlanTable() {
      this.tableData.push({ index: this.tableData.length + 1, isSet: true, isDelete: true })
    },
    changeData(item) {
      this.$forceUpdate();
      console.log(item)
    },
    //编辑
    editRow(row, index) {
      // console.log(this.tableData)
      // this.$forceUpdate();
      // let tempList = []
      // row.players.forEach(element => {
      //   tempList.push(element.value)
      // });

      // this.$nextTick(() => {
      //   if (row.isSet) {
      //     this.tableData[index].isSet = false
      //   } else {
      //     this.tableData[index].isSet = true
      //   }
      //   row.persons = tempList
      //   this.getUser([row.responsibleDeptId])
      //   row.responsibleDept = ''
      //   //  row.responsibleDeptId = ""
      //   this.$forceUpdate();
      //   this.isEdit = true;
      // })

      row.isSet = true
      this.editFlag = false
      this.isEdit = true
      this.$nextTick(function () {
        // let dept = [row.responsibleDeptId]
        // this.getUser(dept)
        // let players = []
        // row.personOriginal.forEach(item => {
        //   players.push(item.value)
        // });
        // row.players = players
        this.form = row
        console.log(this.form)
      })
      this.dialogEditPlan = true;
    },
    viewRow(row) {
      // let dept = [row.responsibleDeptId]
      // this.getUser(dept)
      // let players = []
      // row.personOriginal.forEach(item => {
      //   players.push(item.value)
      // });
      // row.players = players
      this.form = row
      this.editFlag = true
      this.dialogEditPlan = true;
    },
    closed() {
      this.editFlag = false
      this.isEdit = false;
    },
    //删除
    deleteRow(row, index) {
      // console.log(index)
      this.tableData.splice(index, 1);
      deletePlan(this.$route.query.taskId, row.id).then(res => {
        if (res.code = 200) {
          this.regularTableData.forEach((element, index) => {
            this.regularTableData[index].status = false
          });

          this.loadTable()
          alert("删除成功！")
        }
      })
      // setTimeout(, 1000)

    },
    // 设置默认值
    setDefault() {
      this.getAllUserListInfo();
      this.opinionform.userId = this.$store.state.user.id;
      this.opinionform.time = this.$dayjs().format("YYYY-MM-DD HH:mm:ss");
    },
    //编辑或新增
    newPlan(row) {
      if (this.checkRow(row) != true) {
        return
      }
      if (this.isEdit) {
        this.form.taskId = this.$route.query.taskId
        editPlan(this.$route.query.taskId, this.form).then(res => {
          if (res.code = 200) {
            alert("编辑成功！")
            this.dialogEditPlan = false;
            this.isEdit = false;
            this.form = {
              players: '',
              startTime: "",
              endTime: "",
              responsibleDeptId: "",
              responsiblePersonId: "",
              content: "",
              taskId: "",
              responsiblePerson: ""
            }
            this.loadTable();
          }
        })
        this.isEdit = false;
      } else {
        this.form = row
        this.form.taskId = this.$route.query.taskId
        console.log('depts', this.$refs.OptionRefDept)
        this.form.responsibleDeptId = row.responsibleDept[0]
        this.deptOptions.forEach(element => {
          if (this.form.responsibleDeptId == element.value) {
            this.form.responsibleDept = element.label
          }
        });
        this.userListOptions.forEach(element => {
          if (this.form.responsiblePerson == element.value) {
            this.form.responsiblePerson = element.label
          }
        });
        console.log(this.form)
        addPlan(this.$route.query.taskId, this.form).then(res => {
          if (res.code == 200) {
            alert("添加成功");
            // this.dialogEditPlan = false
            this.loadTable()
          }
          this.form = {
            players: '',
            startTime: "",
            endTime: "",
            responsibleDeptId: "",
            responsiblePersonId: "",
            content: "",
            taskId: "",
            responsiblePerson: ""
          }
        })
      }
    },
    // 获取所有用户
    getAllUserListInfo() {
      getAllUser().then(res => {
        this.userList = res.data;
        console.log('this.userList', this.userList)
      })

    },
    //根据部门获取用户
    getUser(deptId) {
      let dept = deptId[deptId.length - 1]
      let userList = []
      getAllUser().then(res => {
        console.log('user', res, dept)
        res.data.forEach(item => {
          let userInfo = {}
          if (item.deptId == dept) {
            userInfo.label = item.name
            userInfo.value = item.value
            userList.push(userInfo)
          }

        });
        this.userListOptions = userList
      })
    },
    checkRow(item) {
      var result = true
      var message = []
      if (item?.planType == '') {
        result = result && false
        message.push('计划类型不能为空')
      }
      // if (item?.responsibleDept == '') {
      //   result = result && false
      //   message.push('计划负责部门不能为空')
      // }
      // if (item?.responsiblePerson == '') {
      //   result = result && false
      //   message.push('计划负责人不能为空')
      // }
      if (item?.startTime == '') {
        result = result && false
        message.push('计划开始时间不能为空')
      }
      if (item?.endTime == '') {
        result = result && false
        message.push('计划结束时间不能为空')
      }
      if (item?.persons?.length == 0) {
        result = result && false
        message.push('主要作业人员不能为空')
      }
      if (item?.content == '') {
        result = result && false
        message.push('计划内容不能为空')
      }
      if (!result) {
        var temp = '';
        message.forEach(v => {
          temp += `<li>${v}</li>`;
        })
        return this.$notify({
          title: '属性列表提示',
          dangerouslyUseHTMLString: true,
          type: 'warning',
          duration: 3000,
          message: `<ul>${temp}</ul>`
        });
      } else {
        return true
      }
    },
    //提交
    beginProductionPlan() {
      var result = true
      var message = []
      this.tableData.forEach((item, index) => {
        let no = index + 1
        if (item?.planType == '') {
          result = result && false
          message.push('第' + no + '行：计划类型不能为空')
        }
        // if (item?.responsibleDept == '') {
        //   result = result && false
        //   message.push('第' + no + '行：计划负责部门不能为空')
        // }
        // if (item?.responsiblePerson == '') {
        //   result = result && false
        //   message.push('第' + no + '行：计划负责人不能为空')
        // }
        if (item?.startTime == '') {
          result = result && false
          message.push('第' + no + '行：计划开始时间不能为空')
        }
        if (item?.endTime == '') {
          result = result && false
          message.push('第' + no + '行：计划结束时间不能为空')
        }
        if (item?.persons?.length == 0) {
          result = result && false
          message.push('第' + no + '行：主要作业人员不能为空')
        }
        if (item?.content == '') {
          result = result && false
          message.push('第' + no + '行：计划内容不能为空')
        }
      })
      if (!result) {
        var temp = '';
        message.forEach(v => {
          temp += `<li>${v}</li>`;
        })
        return this.$notify({
          title: '属性列表提示',
          dangerouslyUseHTMLString: true,
          type: 'warning',
          duration: 3000,
          message: `<ul>${temp}</ul>`
        });
      } else {
        if (this.tableData.length > 0) {
          startProductionPlan(this.$route.query.taskId, 'production_plan').then(res => {
            if (res.code == 200) {
              alert("提交成功！")
              this.afterSubmit = true
              this.loadTable()
              this.getProductionPlanProcessList()
            }
          })
        } else {
          alert("请先添加生产计划子项")
        }
      }


    },
    //审批
    doApproveProductionPlan() {
      if (this.opinionform.opinions) {
        console.log(this.$refs.userId)
        this.opinionform.userName = this.$refs.userId.selected.label
        approveProductionPlan(this.$route.query.taskId, 'production_plan', this.opinionform).then(res => {
          if (res.code == 200) {
            alert("提交成功！")
            this.canEditOpinions = true
            this.loadTable()
            this.getProductionPlanProcessList()
          }

        })
      } else {
        alert("请填写审批意见")
      }

    },
    //获取办理过程
    getProductionPlanProcessList() {
      let that = this;
      productionPlanProcessList(this.$route.query.taskId, 'production_plan').then(res => {
        res.data.sort(function (a, b) {
          // 将时间字符串转换为日期对象，以便进行比较
          var dateA = new Date(a.startTime);
          var dateB = new Date(b.startTime);
          return dateA - dateB;
        });
        console.log('flowlist', res.data)
        this.wfActivityKey = res.data[res.data.length - 1]?.wfActivityKey
        that.userRole.forEach(item => {
          if (item == that.wfActivityKey || item == 'admin') {
            this.canEditOpinions = false
          }
          if (res.data.length == 0) {
            this.canEditOpinions = true
            // this.roleKey = true
          }
          //scbm_rwfzr
        });
        // console.log('getProductionPlanProcessList', res)
        this.flowList = [];
        this.flowList = res.data.sort((a, b) => {
          if (a.doneTime === null) return 1;
          if (b.doneTime === null) return -1;
          return new Date(a.doneTime).getTime() - new Date(b.doneTime).getTime();
        });
        // res.data.forEach(item => {
        //   this.processStatusOption.forEach(item2 => {
        //     if (item.status == item2.value) {
        //       item.status = item2.label
        //     }
        //   });
        //   let flow = {
        //     head: '@/assets/head/head.png',
        //     user: item.wfActivityName,
        //     flow: item.status,
        //     time: item.doneTime,
        //     startTime: item.startTime,
        //     opinions: item.opinions
        //   }
        //   this.flowList.push(flow)
        // });
      })
    },
    getDict(dictName) {
      let dict = this.$store.state.dictNew[dictName]
      return dict
    },
    // 定义一个函数用于转换字典值为标签
    convertDictValueToLabel(dictValue, dictName) {
      const labelMap = {};
      let dict = this.$store.state.dictNew[dictName]
      dict.forEach(item => {
        labelMap[item.value] = item.label
      });
      let label = '';
      if (labelMap.hasOwnProperty(dictValue)) {
        label += labelMap[dictValue] + ' ';
      }
      // console.log('label', label.trim())
      return label.trim(); // 去除首尾空格
    },
  },
  watch: {

  }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  width: 100wh;
  /* height: 100vh; */
  padding: 0px;
  /* background-color: aqua; */
  font-weight: 500;

  .top {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    width: 100wh;
    height: 12vh;
    padding: 0px;
    /* background-color: rgb(0, 255, 55); */

    .top-item {
      display: flex;
      flex-direction: column;
      padding-left: 30px;
      /* width: 120px; */

      .greenPoint {
        background-color: #2ABF73;
        height: 10px;
        width: 10px;
        margin-right: 5px;
        margin-top: 19px;
        border-radius: 5px;
        margin-left: 10px;
      }
    }
  }

  .bottomAll {
    background-color: #FFFFFF;
    width: 103%;
    margin-top: 10px;

    .bottomTitle {
      width: 100%;
      height: 46px;
      align-items: center;
      border-bottom: 2px solid #DCDFE6;
      margin-bottom: 30px;
      display: flex;
      align-items: center;

      .bottomText {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 16px;
        color: #303133;
        line-height: 24px;
        margin-left: 20px;
      }
    }
  }

  .main {
    margin-top: 10px;
    background-color: #FFFFFF;
    padding: 24px;
    padding-top: 0px;

    .tablehead {
      display: flex;
      width: 100%;

    }
  }

  .logs {
    width: 100%;
    border: 1px solid #666;
    color: #999;

    .logsTitle {
      width: 100%;
      height: 60px;
      line-height: 60px;
      padding-left: 20px;
      border-bottom: 2px solid #999;
    }

    .logsContent {
      padding-top: 30px;

      .opinions {
        width: 600px;
        height: 50px;
        line-height: 50px;
        background: #f2f2f2;
        border-radius: 4px;
        padding-left: 10px;
      }
    }
  }

  .line {
    width: 100%;
    height: 2px;
    background: #999;
    margin-bottom: 20px;
  }


}
</style>

<style>
.el-dialog__header {
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}
</style>
